<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Network Visualization</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'visualizer/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'visualizer/css/tagify.4.35.3.min.css' %}">
    <script src="{% static 'visualizer/js/tagify.4.35.3.min.js' %}"></script>
</head>
<body>
    <svg id="network"></svg>
    
    <div class="help-panel">
        <h2>Keyboard Shortcuts</h2>
        <ul>
            <li><strong>?</strong> - Show this help</li>
            <li><strong>/</strong> - Search nodes</li>
            <li><strong>ESC</strong> - Close help/search</li>
        </ul>
    </div>
    
    <div class="search-box">
        <input type="text" placeholder="Search nodes by ID...">
    </div>

    <!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script> -->
    <script type="module" src="{% static 'visualizer/js/d3.v7.9.0.min.js' %}"></script>
    <script>
        // 直接从Django模板变量获取数据
        const initialData = {{ initial_data|safe }};
        // 转换字符串'true'/'false'为布尔值
        initialData.connections.forEach(conn => {
            if (typeof conn.directed === 'string') {
                conn.directed = conn.directed === 'true';
            } else if (typeof conn.directed === 'undefined') {
                conn.directed = false;
            }
        });
        // 确保每个节点都有desc_type字段
        initialData.nodes.forEach(node => {
            if (!node.desc_type) {
                node.desc_type = 'plain';
            }
        });
        console.log('Initial data loaded:', initialData);
        window.initialData = initialData; // 确保全局可用
    </script>
    <script src="{% static 'visualizer/js/marked.min.js' %}"></script>
    <script type="module" src="{% static 'visualizer/js/globalMgr.js' %}"></script>
    <script type="module" src="{% static 'visualizer/js/graphicsAPI.js' %}"></script>
    <script type="module" src="{% static 'visualizer/js/dbAPI.js' %}"></script>
    <script type="module" src="{% static 'visualizer/js/networkAPI.js' %}"></script>
    <script type="module" src="{% static 'visualizer/js/main.js' %}"></script>
</body>
</html>